<template>
	<view class="box">
		<view class="statusBar" :style="{height:statusHeight}"></view>
		<map
			class="map" 
			:longitude="longitude" 
			:latitude="latitude" 
			:markers="markers" 
			>
		</map>
		<input type="text" @click="toSearch">
		<!-- <text @click="toSearch"></text> -->
	</view>
</template>

<script>
	import amapFile from '../../libs/amap-wx.130.js'
	export default {
		data() {
			return {
				statusHeight:0,
				longitude:'104.070734',
				latitude:"30.575041",
				// 地图标记的数据 打点
				markers:[
					{
						id:1,
						latitude:30.575041,
						longitude:104.070734,
						iconPath:'../../static/img/location.png',
						// 标记点图片的宽高
						width:30,
						height:30
					},
				],
			}
		},
		onLoad() {
			// 获取设备信息 状态栏高度
			var info = uni.getSystemInfoSync();
			// console.log(info);
			this.statusHeight=info.statusBarHeight+'px';
			var that = this;
			var myAmapFun = new amapFile.AMapWX({key:'26b9295dcaa80f8a723eb3560acb024e'});
			myAmapFun.getRegeo({
			      success: function(data){
			        //成功回调
					// 定位有误差
					that.markers[0].latitude=data[0].latitude
					that.markers[0].latitude=data[0].latitude
			      },
			      fail: function(info){
			        //失败回调
			        console.log(info)
			      }
			    })
		  },
		  
		methods: {
			toSearch(){
				uni.navigateTo({
					url: '/pages/search/search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.statusBar{
			width: 100%;
			background-color: #fff;
		}
		map{
			width: 100%;
			height: 1500rpx;
			// position: absolute;
			//   top: 0;
			//   bottom: 0;
			//   left: 0;
			//   right: 0;
		}
		// text{
		input{
			display: block;
			width: 90%;
			height:40px;
			box-shadow: 0px 0px 5px #005efe inset;
			border-radius: 10px;
			position:absolute;
			bottom:10px;
			background-color: #fff;
			padding:0 10px;
		}
	}
	

</style>
